import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:jetour_line/map/base_map_widget.dart';
import 'package:jetour_line/models/jetour_line_detail.dart' as detail;
import 'package:jetour_line/my_colors.dart';
import 'package:jetour_line/pages/line/lineDetail/line_detali_image_page.dart';
import 'package:jetour_line/pages/map_detail_page.dart';
import 'package:jetour_line/utils/extension_int.dart';
import 'package:jetour_line/utils/page_push_utils.dart';

import '../../../base_widget/banner_widget.dart';
import '../../../base_widget/base_image.dart';
import '../../../base_widget/sliver_list_widget.dart';
import '../../../base_widget/video_widget.dart';
import '../../../models/common_detail_model.dart';

class CommonDetailHeadWidget extends StatefulWidget {
  final CommonDetailModel detailModel;

  const CommonDetailHeadWidget({Key? key, required this.detailModel})
      : super(key: key);

  @override
  State<CommonDetailHeadWidget> createState() => _CommonDetailHeadWidgetState();
}

class _CommonDetailHeadWidgetState extends State<CommonDetailHeadWidget> {
  int curIndex = 0;
  @override
  Widget build(BuildContext context) {
    List images = [];
    images.addAll(widget.detailModel.videos);
    images.addAll(widget.detailModel.images);
    bool isVideo = curIndex <widget.detailModel.videos.length;
    return SliverListWidget.getSliverList(1, (context, index) {
      return Padding(
        padding: EdgeInsets.only(bottom: 40.px),
        child: Stack(
          children: [
            if (images.isNotEmpty)
              BannerWidget(
                images,
                width: double.infinity,
                autoPlayer: widget.detailModel.videos.isEmpty,
                height: 480.px,
                changeIndexCallBack: (index) {
                  curIndex = index;
                  setState(() {});
                },
                selIndexCallBack: (index) {
                  PagePushUtils.push(
                      context,
                      LineDetailImageScreen(
                        images: images,
                        index: index,
                      ));
                },
              ),

            Positioned(
              right: 10.px,
              top: 348.px,
              child: Stack(
                children: [
                  ClipRRect(
                    borderRadius: BorderRadius.all(Radius.circular(24.px)),
                    child: Opacity(
                      opacity: 0.8,
                      child: Container(
                        width: 200.px,
                        height: 48.px,
                        color: MyColors.color1A1A1A,
                      ),
                    ),
                  ),

                  Positioned(
                    left: isVideo? 0:100.px,
                    child: ClipRRect(
                      borderRadius: BorderRadius.all(Radius.circular(24.px)),
                      child: Container(
                        width: 100.px,
                        height: 48.px,
                        color: MyColors.white,
                      ),
                    ),
                  ),
                  Row(
                    children: [
                      Row(
                        children: [
                          SizedBox(
                            width: 10.px,
                            height: 48.px,
                          ),
                          BaseImage(
                            image: 'icon_gcxqvoice_sel',
                            width: 32.px,
                            height: 32.px,
                          ),
                          Text(
                            "视频",
                            style: TextStyle(
                                fontSize: 20.px, color:isVideo? MyColors.color1A1A1A:MyColors.white),
                          ),
                        ],
                      ),
                      Row(
                        children: [
                          SizedBox(
                            width: 35.px,
                          ),
                          BaseImage(
                            image: 'icon_jdphoto',
                            width: 32.px,
                            height: 32.px,
                          ),
                          Text(
                            "${images.length}",
                            style: TextStyle(
                                fontSize: 24.px, color:!isVideo? MyColors.color1A1A1A:MyColors.white),
                          ),
                        ],
                      ),
                    ],
                  ),
                ],
              ),
            ),

            Column(
              children: [
                SizedBox(
                  height: 416.px,
                ),
                titleWidget()
              ],
            )

            // titleWidget(),
          ],
        ),
      );
    });
  }

  Widget titleWidget() {
    String caption = widget.detailModel.caption;
    String? subTitle;
    if (widget.detailModel.startCity == null) {
      subTitle =
          '${widget.detailModel.totalDay}天 · 全程${widget.detailModel.distance}';
    } else {
      subTitle =
          '${widget.detailModel.startCity}-${widget.detailModel.endCity} · ${widget.detailModel.totalDay}天 · 全程${widget.detailModel.distance}';
    }
    String msg = widget.detailModel.description;
    return ClipRRect(
      borderRadius: BorderRadius.only(
          topLeft: Radius.circular(56.px), topRight: Radius.circular(56.px)),
      child: Container(
        padding: EdgeInsets.only(
            top: 40.px, left: 24.px, right: 24.px, bottom: 24.px),
        color: MyColors.white,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              caption,
              style: TextStyle(
                  fontSize: 36.px,
                  color: MyColors.color1A1A1A,
                  fontWeight: FontWeight.w500),
            ),
            SizedBox(
              height: 24.px,
            ),
            SizedBox(
              height: 38.px,
            ),
            tagWidget(),
            SizedBox(
              height: 38.px,
            ),
            Container(
              width: double.infinity,
              height: 1.px,
              color: MyColors.colorF1F1F1,
            ),
            SizedBox(
              height: 33.px,
            ),
            // Expanded(child: Container(height: 1.px,color: MyColors.colorF1F1F1,)),
            Text(
              "行程介绍",
              style: TextStyle(
                  fontSize: 32.px,
                  color: MyColors.color1A1A1A,
                  fontWeight: FontWeight.w500),
            ),
            SizedBox(
              height: 32.px,
            ),
            Text(
              msg,
              style: TextStyle(fontSize: 28.px, color: MyColors.color666666),
            ),
            SizedBox(
              height: 32.px,
            ),
            Container(
              width: double.infinity,
              height: 250.px,
              child: mapWidget(),
            ),
          ],
        ),
      ),
    );
  }



  Widget tagWidget() {
    if (widget.detailModel.tag == null || widget.detailModel.tag!.isEmpty) {
      return SizedBox();
    } else {
      return ClipRRect(
        borderRadius: const BorderRadius.all(Radius.zero),
        child: SizedBox(
          width: double.infinity,
          child: Wrap(
            alignment: WrapAlignment.start,
            runAlignment: WrapAlignment.center,
            spacing: 11.px,
            runSpacing: 11.px,
            children: [
              for (int i = 0; i < widget.detailModel.tag!.length; i++)
                ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(6.px)),
                  child: Container(
                    color: MyColors.color344,
                    child: Padding(
                        padding: EdgeInsets.all(8.px),
                        child: Text(
                          overflow: TextOverflow.visible,
                          widget.detailModel.tag![i],
                          style: TextStyle(
                              fontSize: 20.px, color: MyColors.colorEE7219),
                        )),
                  ),
                )
            ],
          ),
        ),
      );
    }
  }

  List nodes = [];

  Widget mapWidget() {
    if (nodes.isEmpty) {
      int index = 1;
      for (int i = 0; i < widget.detailModel.nodeList.length; i++) {
        for (int j = 0; j < widget.detailModel.nodeList[i].node.length; j++) {
          Node node = widget.detailModel.nodeList[i].node[j];
          Map<String, dynamic> map = {};
          map['nodeId'] = node.nodeId;
          map['index'] = index++;
          map['groupIndex'] = i;
          map['childIndex'] = j;
          map['caption'] = node.caption;
          map['lat'] = node.lat;
          map['lng'] = node.lng;
          map['type'] = 'commonDetail';
          nodes.add(map);
        }
      }
    }
    return Stack(
      alignment: Alignment.center,
      children: [
        BaseMapWidget(
          creationParams: nodes,
        ),
        GestureDetector(
            onTap: () {
              PagePushUtils.push(context, MapDetailScreen(markers: nodes));
            },
            child: ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(16.px)),
              child: Container(
                width: 188.px,
                height: 114.px,
                color: MyColors.white,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    BaseImage(
                      image: 'icon_lsmap',
                      width: 40.px,
                      height: 40.px,
                    ),
                    Text("查看地图",
                        style: TextStyle(
                          fontSize: 24.px,
                          color: MyColors.appColor,
                        ))
                  ],
                ),
              ),
            ))
      ],
    );
  }
}
